<template>
	<view class="container">
		<div class="tobg">
			<image src="/static/img/agent/addbg.png" mode=""></image>
		</div>
		<view class="list">
			<view class="list-item">
				<text>*手机号</text>
				<input type="text" v-model="ali_phone" placeholder="请输入" :disabled="true"/>
			</view>
			<view class="list-item">
				<text>*验证码</text>
				<input type="text" v-model="code" placeholder="请输入" />
				<view class="sendCode" @click="showBtn=false;cutTime(60)">{{ showBtn?'获取验证码':num+'S' }}</view>
			</view>
			<view class="list-item">
				<text>*支付宝账号</text>
				<input type="text" v-model="ali_account" placeholder="请输入"/>
			</view>
			<view class="list-item">
				<text>*姓名</text>
				<input type="text" value="" v-model="ali_name" placeholder="请输入" />
			</view>
		</view>

		<view class="btn">
			<div class="submitbtn" @click="submit">立即绑定</div>
		</view>
	</view>
</template>

<script>
import { bankDetail, bank, bandBank, sendCode } from '../../../api/api.js'
export default {
	data() {
		return {
			ali_name: '',
			ali_account: '',
			ali_phone:'',
			code:'',
			showBtn:true,
			num:60,
			timer:null
		}
	},
	onLoad() {
		this.ali_phone = uni.getStorageSync('user').mobile;
		this.getBankInfo()
	},
	methods: {
		cutTime(num){
			if(this.ali_phone){
				this.timer = setInterval(()=>{
					num--;
					if(num>0){
						this.showBtn = false
						this.num = num;
					}else{
						this.showBtn = true;
						clearInterval(this.timer)
					}
					
				},1000)
				sendCode({
					mobile:this.ali_phone,
					event:'notice'
				}).then(res => {
					console.log(res)
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				})
			}else{
				uni.showToast({
					icon: 'none',
					title: '请输入登陆账号'
				})
				return
			}
			
		},
		getBankInfo() {
			bankDetail().then(res => {
				console.log(res)
				if (res.data) {
					this.card = true;
					this.ali_name = res.data.ali_name;
					this.ali_account = res.data.ali_account;
				} else {
					this.card = false;
				}
			})
		},
		submit() {
			if (!this.ali_name) {
				uni.showToast({
					icon: 'none',
					title: '请输入姓名'
				})
				return
			}
			if (!this.ali_account) {
				uni.showToast({
					icon: 'none',
					title: '请输入支付宝账号'
				})
				return
			}
			// 绑定银行卡
			bandBank({
				token:uni.getStorageSync('token'),
				ali_name: this.ali_name,
				ali_account:this.ali_account,
				code:this.code
			}).then(res=>{
				if(res.code == 1){
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/agent/user'
						})
					},600)
					
				}
			})
			
		}
	}
}
</script>

<style scoped lang="scss">
.container {
	width: 100%;
	height: 100%;
	background: #F7F7F7;
	.tobg{
		width: 100%;
		height: 104px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.list {
		width: 100%;
		background: url('../../../static/img/agent/ygbg.png') no-repeat center;
		background-size: 100% 100%;
		position: absolute;
		top: 20px;
		// left: calc((15% - 52px) / 2);
		padding: 26px;
		
		.list-item {
			width: 100%;
			// height: 80upx;
			line-height: 80upx;
			padding: 10upx 0;
			display: flex;
			justify-content: space-between;
			// border-bottom: 1upx solid #ECECEC;
			position: relative;
			text{
				font-weight: bold;
				font-size: 14px;
			}
			input {
				width: 203px;
				height: 44px;
				// text-align: right;
				border: 1px solid #F6F6F6;
				background: #FFFFFF;
				border-radius: 6px;
				padding-left: 10px;
			}
		}
	}
	
	.btn {
		width: calc(100% - 60upx);
		margin: 240px auto 0 auto;
		height: 90upx;
		.submitbtn {
			width: 100%;
			height: 100%;
			height: 90upx;
			background: linear-gradient(311deg, #93A4FB 0%, #2F9AFE 100%);
			box-shadow: 0px 2px 6px 0px rgba(20,135,255,0.4);
			border-radius: 22px;
			color: #FFFFFF;
			line-height: 90upx;
			text-align: center;
			font-size: 17px;
		}
	}
	.sendCode{
		font-weight: 400;
		font-size: 14px;
		color: #05A3FF;
		position: absolute;
		right: 10px;
		top: 8px;
	}
}
</style>
